<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>厚度曲线</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card class="queryInfo">
      <el-row :gutter="10">
        <el-col :span="5">
          <el-select v-model="queryInfo.gateway" placeholder="请选择网关名称" size="small" @change="getDevice">
            <el-option v-for="(gateway, index) in gateways" :key="index" :label="gateway" :value="gateway"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select v-model="queryInfo.devicename" placeholder="请选择设备号" size="small" @change="getProbes">
            <el-option v-for="(devicename, index) in devicenames" :key="index" :label="devicename" :value="devicename"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="5">
          <el-select v-model="queryInfo.probe" placeholder="请选择探头" size="small">
            <el-option v-for="(probe, index) in probes" :key="index" :label="probe" :value="probe"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button size="mini" @click="getMdata" type="primary">确定</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div style="width: 100%; height: 500px" ref="thickChartsRef"></div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryInfo: {
        gateway: null,
        devicename: null,
        probe: null,
      },
      mdatas: [],
      gateways: [],
      devicenames: [],
      probes: [],
      thickChart: null,
    }
  },
  created() {
    this.getGateway()
  },
  mounted() {
    this.initChart()
  },
  methods: {
    // 获取网关列表
    async getGateway() {
      const { data: res } = await this.$http.get('baseinfo/gateways/')
      // console.log(res)
      if (res.meta.status === 200) {
        this.gateways = res.data.gateways
      }
    },
    // 获取网关下的设备列表
    async getDevice() {
      const { data: res } = await this.$http.get('baseinfo/devices/', { params: this.queryInfo })
      // console.log(res)
      if (res.meta.status === 200) {
        this.devicenames = res.data.devices
      }
    },
    // 获取端口号的函数
    async getProbes() {
      const { data: res } = await this.$http.get('baseinfo/probes/', { params: this.queryInfo })
      if (res.meta.status === 200) {
        this.probes = res.data.probes
      }
    },
    // 初始化echarts实例
    initChart() {
      // var echarts = require('echarts')
      // this.thickChart = echarts.init(this.$refs.thickChartsRef)
      // 基于准备好的dom，初始化echarts实例
      this.thickChart = this.$echarts.init(this.$refs.thickChartsRef)

      // 指定图表的配置项和数据
      var initOption = {
        title: {
          text: '在线壁厚监测数据',
          textStyle: {
            fontSize: 25,
          },
          // 坐标轴的配置
          grid: {
            show: true,
            top: '150%',
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true,
          },
          left: 150,
          top: 15,
        },
        // 信息提示相关的配置
        tooltip: {},
        // 范围缩放器
        dataZoom: [
          {
            type: 'slider',
            xAxisIndex: 0,
          },
        ],
        toolbox: {
          feature: {
            saveAsImage: {},
            dataZoom: {},
            dataView: {
              show: true,
              title: '数据视图',
              readOnly: true,
            },
          },
        },
        xAxis: {
          type: 'category',
          // 坐标紧挨边缘
          boundaryGap: false,
        },
        yAxis: {
          type: 'value',
          // 配置y轴数据是否从0开始
          scale: false,
          position: 'left',
        },
        series: [
          {
            name: '壁厚在线测厚数据',
            type: 'line',
            smooth: true,
            data: [0, 0, 0, 0, 0],
            lineStyle: {
              // color: 'blue',
              type: 'solid',
            },
            markPoint: {
              data: [
                {
                  type: 'max',
                },
                {
                  type: 'min',
                },
              ],
            },
            markLine: {
              data: [{ type: 'average' }],
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      this.thickChart.setOption(initOption)
    },
    // 获取设备壁厚和温度数据
    async getMdata() {
      this.thickChart.showLoading()
      const { data: res } = await this.$http.get('thickcharts/getmdatas/', { params: this.queryInfo })
      if (res.meta.status === 200) {
        this.mdatas = res.data.mdatas
        // console.log(this.mdatas)
        this.thickChart.hideLoading()
        this.updateChart()
      }
    },
    // 更新图表
    updateChart() {
      const datetimes = this.mdatas.map((item) => {
        return item.add_time
      })
      const thickness = this.mdatas.map((item) => {
        return item.thickness
      })
      const dataOption = {
        xAxis: {
          data: datetimes,
        },
        series: {
          data: thickness,
        },
      }
      this.thickChart.setOption(dataOption)
    },
  },
}
</script>

<style lang="less" scoped>
.queryInfo {
  .el-select {
    width: 100% !important;
  }
}
</style>
